<template>
  <div class="tabbar">
    <!-- 底部导航 -->
    <van-tabbar v-model="selected" fixed placeholder active-color="#e4004f">
      <van-tabbar-item name="/" icon="shop-o">首页</van-tabbar-item>
      <van-tabbar-item name="/goodslist/cakelist" icon="points"
        >分类</van-tabbar-item
      >
      <!-- 购物车中有物品时显示徽标 -->
      <van-tabbar-item
        name="/cart"
        icon="cart-circle-o"
        :badge="cart.length == 0 ? '' : cart.length"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item name="/my" icon="user-circle-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 设置默认选中状态
      selected: this.$route.path,
    };
  },
  // 获取购物车数据
  computed: {
    ...mapState(["cart"]),
  },
  // 路由监听
  watch: {
    selected(newValue) {
      this.$router.push(newValue);
    },
  },
};
</script>

<style scoped></style>
